<template>
    <div class="group-detail">
        <div class="search-content" style="padding: 20px 0px">
            <a class="btn-bottom"  href="https://4s.mycjj.com/download/%E5%B9%B3%E5%8F%B0%E5%88%B8%E6%89%B9%E9%87%8F%E5%8F%91%E9%80%81%E6%A8%A1%E7%89%88.csv">实例下载</a>
        </div>
        <el-table :data="addArr" border :height="oHeight">
            <el-table-column
                align="center"
                prop="手机"
                label="手机"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="姓名"
                label="姓名"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                label="卡券ID"
                prop="卡券ID"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="张数"
                label="张数"
                min-width="90"> 
            </el-table-column>
            <el-table-column
                align="center"
                prop="短信通知"
                label="短信通知"
                min-width="120">
            </el-table-column>
        </el-table>
        <div class="paginationOne" style="text-align:left">
            <el-upload
                ref="upload"
                action="/wm/upload"
                :show-file-list="false"
                :on-change="readExcel"
                :auto-upload="false"
                style="display: inline-block"
            >
                <el-button type="primary">选择文件</el-button>
            </el-upload>
            <el-button type="primary" style="margin-left: 20px;" @click="upload">导入文件</el-button>
        </div>
    </div>
</template>
<script>
	
	import Qs from 'qs';
	import {dateFormatter} from "../../../../common/js/util";
    import { resize } from "@/common/js/height.js";
    import XLSX from "xlsx";
	export default {
		data() {
			return {
                dataDetail:'',
                group: {
			        name: ''
				},
                addArr:[],
                oHeight: 300,
			}
		},
        components: {XLSX},
       
		methods: {
            upload() {
                const data = {};
                data.arr = this.addArr;
				this.$http.post('/admin/coupon/index.php?act=send_coupon&op=sendCoupon', data).then(res => {
					if (res.code == 1) {
                        alert("上传成功");
						this.addArr=[];
					}
					else {
						alert(res.msg);
					}
				})
			},
		

         // 读取excel
    readExcel(file){ //此处接受的file，为文件上传的file
      var reader = new FileReader();
      //以二进制方式读取文件
      reader.readAsBinaryString(file.raw);
      var rABS = false; //是否将文件读取为二进制字符串
      reader.onload = (e) => {
          //获取文件数据
          const data = e.target.result;//e.target.value  
          const wb = XLSX.read(data, { type: "binary",codepage: 936  });
          
          //获取第一张表
          const wsname = wb.SheetNames[0];
          const ws = wb.Sheets[wsname];
          var result = XLSX.utils.sheet_to_json(ws, { header: 2 });
          this.addArr=result;
          console.log(this.addArr);
        //   this.dataDetail(result);
          return result;
      };
    },
   
    
    
		},
        mounted() {
			resize(this)
		},
		name: "group-detail"
	}
</script>

<style lang="scss" scoped>
    .group-detail {
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        .row-group {
            .col-item {
                .label {
                    display: inline-block;
                    font-weight: 600;
                    width: 100px;
                    text-align: right;
                }
                .input {
                    width: 400px;
                }
                .group-desc {
                    box-sizing: content-box;
                    width: 375px;
                    border: 1px solid #000;
                    /deep/img {
                        width: 100%;
                        float: left;
                    }
                }
                .img-wrapper {
                    .img-header {
                        width: 360px;
                        height: 188px;
                        vertical-align: top;
                    }
                    .img-mark {
                        width: 360px;
                        height: 21px;
                        vertical-align: top;
                    }
                    .img-logo {
                        width: 50px;
                        height: 50px;
                        vertical-align: top;
                    }
                    .img-flow {
                        width: 180px;
                    }
                    .img-post {
                        width: 180px;
                        vertical-align: top;
                    }
                }
                .img-wrapper.img-flow-wrapper {
                    display: inline-block;
                    width: 180px;
                    max-height: 320px;
                    overflow-y: auto;
                    vertical-align: top;
                }
                .img-wrapper + .img-wrapper {
                  
                }
            }
        }
        .row-group + .row-group {
            margin-top: 20px;
        }
        .btn-bottom {
        background: #409EFF;
        color: #fff;
        border: 0;
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 3px;
        display: inline-block;
        margin-left: 20px;
    }
    }
</style>